<template>
    <div class="azaelan">
        <div class="bg" @click="handleClick(azaelan.herf)">
            <image class="img" :src="azaelan.img" mode="aspectFill"></image>
        </div>
    </div>
</template>

<script>
    import {
        navigateTo
    } from '@/scripts/compatible/pageOptions.js'
    export default {
        props: {
            azaelan: {
                type: Object,
                default: () => []
            }
        },
        data() {
            return {}
        },
        methods: {
            handleClick(herf) {
                navigateTo(herf)
            },
        },
    }
</script>

<style lang="scss" scoped>
    .azaelan {
        padding: 10px 20px;

        .bg {
            height: 100px;
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 14px -14rpx #a3c8ff;

            .img {
                display: block;
                width: 100%;
                height: 100px;
            }
        }
    }
</style>